<template>
	<view>
		<view class="p-2">
			<view class="d-flex a-center py-2 border-bottom border-light-secondary j-sb">
				<text class="text-muted" >用户评价(123)</text>
				<view class="">
					<text class="main-text-color mr-1">98.5%</text>
					<text class="text-muted">满意</text>
				</view>
			</view>
			<view class="d-flex flex-wrap pt-2"
			style="margin-right: -20rpx;">
				<view class="px-2 py border rounded mr-2 mb-2 cate-item"
				v-for="(item,index) in cateList" :key="index"
				:class="index === cateIndex ? 'active' : ''"
				@tap="cateChange(index)">
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		
		<divider></divider>
		
		<!-- 评论列表 -->
		<view class="p-2 d-flex a-start border-bottom border-light-secondary">
			<image src="../../static/images/demo/demo6.jpg" 
			mode="widthFix"
			style="width: 90rpx;height: 90rpx;"
			class="rounded flex-shrink"></image>
			
			<view class="pl-2 flex-1 ">
				<view class="d-flex a-center j-sb">
					<text class="font-md text-primary font-weight">强强</text>
					<view class="main-text-color">
						<text class="iconfont icon-service"></text>
						<text class="pl-1 font">超好</text>
					</view>
					
				</view>
				<view class="line-h-md font-md">
					非常好
				</view>
				<view class="row">
					<view class="span24-8 px pb">
						<image src="../../static/images/demo/cate_03.png" 
						mode="widthFix"
						style="height: 90rpx;"></image>
					</view>
				</view>
				<view class="d-flex a-center j-sb">
					<text class="text-light-muted">2020-10-01</text>
					<view class="d-flex">
						<view class="d-flex flex-row mr-2 a-center">
							<text class="mx-1 text-light-muted">0</text>
							<view class="iconfont icon-dianzan text-muted"></view>
						</view>
						<view class="d-flex flex-row a-center">
							<text class="mx-1 text-light-muted">10</text>
							<view class="iconfont icon-pinglun text-muted"></view>
						</view>
					</view>
					
				</view>
				<!-- 客服回复 -->
				<view class="bg-light-secondary rounded p-2 d-flex flex-wrap a-center mt-1">
					<text class="main-text-color">官方回复:</text>
					<text>官方回复，哈哈哈</text>
					<view class="iconfont icon-dianzan text-light-muted line-h-md pl-2">
						<text class="text-muted pl-1 font">赞客服 120</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import divider from "@/components/common/divider.vue"
	export default {
	
		data() {
			return {
				cateIndex: 0,
				
				cateList: [
					{name: '全部'},
					{name: '有图'},
					{name: '非常喜欢'},
					{name: '手感很好'},
					{name: '效果好'},
					{name: '性能很棒'},
				]
			}
		},
		methods: {
			cateChange(index) {
				this.cateIndex = index
			}
		}
	}
</script>

<style>
.cate-item {
	background: #FFEBEC;
	color: #7B6D6C;
	border-color: #F4E0E1;
}
.cate-item.active {
	background: #FF6B01!important;
	color: #FFFFFF!important;
	border-color: #DE7232!important;
}
</style>
